<template>
  <div class="applications-page">
    <div class="page-header">
      <h2 class="page-title">投递管理</h2>
      <el-button @click="goBack" v-if="jobId">
        <el-icon><ArrowLeft /></el-icon>返回职位列表
      </el-button>
    </div>

    <!-- 搜索栏 -->
    <el-card class="search-card">
      <el-form :model="searchForm" label-width="80px" :inline="true">
        <el-form-item label="求职者">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入求职者姓名"
            clearable
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择" clearable>
            <el-option label="待处理" value="0" />
            <el-option label="已查看" value="1" />
            <el-option label="邀请面试" value="2" />
            <el-option label="不合适" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="!jobId" label="职位">
          <el-select v-model="searchForm.jobId" placeholder="请选择" clearable>
            <el-option 
              v-for="job in jobOptions" 
              :key="job.value" 
              :label="job.label" 
              :value="job.value" 
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 申请列表 -->
    <el-card class="application-list" v-loading="loading">
      <el-table :data="applicationList" style="width: 100%">
        <el-table-column label="求职者信息" min-width="200">
          <template #default="{ row }">
            <div class="candidate-info">
              <div class="name">{{ row.candidateName }}</div>
              <div class="info">
                {{ row.candidateInfo || '暂无详细信息' }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="应聘职位" min-width="150" v-if="!jobId">
          <template #default="{ row }">
            {{ row.jobTitle }}
          </template>
        </el-table-column>
        <el-table-column label="投递时间" prop="createTime" width="170" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="viewResume(row)">查看简历</el-button>
            <el-button 
              link 
              type="success" 
              @click="handleInviteInterview(row)"
              :disabled="row.status === 2 || row.status === 3"
            >
              邀请面试
            </el-button>
            <el-button 
              link 
              type="danger" 
              @click="handleReject(row)"
              :disabled="row.status === 3"
            >
              不合适
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 简历详情对话框 -->
    <el-dialog
      v-model="resumeDialogVisible"
      title="简历详情"
      width="800px"
    >
      <div class="resume-detail" v-loading="resumeLoading">
        <template v-if="currentResume">
          <div class="resume-header">
            <h2>{{ currentResume.name }}</h2>
            <div class="basic-info">
              性别：<span>{{ currentResume.gender }}</span>
              出生日期：<span>{{ currentResume.birthday }}</span>
              学校：<span>{{ currentResume.school }}</span>
              专业：<span>{{ currentResume.major }}</span>
              <span>{{ currentResume.experience }}</span>
            </div>
            <div class="contact-info">
              <div><span class="label">电话：</span>{{ currentResume.phone }}</div>
              <div><span class="label">邮箱：</span>{{ currentResume.email }}</div>
            </div>
          </div>
          
          <el-divider />
          
          <div class="resume-section">
            <h3>求职意向</h3>
            <div class="section-content">
              <div class="info-item">
                <span class="label">期望职位：</span>
                <span>{{ currentResume.expectedPosition }}</span>
              </div>
              <div class="info-item">
                <span class="label">期望城市：</span>
                <span>{{ currentResume.expectedCity }}</span>
              </div>
              <div class="info-item">
                <span class="label">期望薪资：</span>
                <span>{{ currentResume.expectedSalary }}</span>
              </div>
            </div>
          </div>
          
          <div class="resume-section">
            <h3>教育经历</h3>
            <div class="section-content">
              <div v-for="(edu, index) in currentResume.education" :key="index" class="timeline-item">
                <div class="time">{{ edu.startTime }} - {{ edu.endTime }}</div>
                <div class="content">
                  <div class="title">{{ edu.school }}</div>
                  <div class="subtitle">{{ edu.major }} | {{ edu.degree }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="resume-section">
            <h3>工作经历</h3>
            <div class="section-content">
              <div v-for="(work, index) in currentResume.workExperience" :key="index" class="timeline-item">
                <div class="time">{{ work.startTime }} - {{ work.endTime }}</div>
                <div class="content">
                  <div class="title">{{ work.company }}</div>
                  <div class="subtitle">{{ work.position }}</div>
                  <div class="description">{{ work.description }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="resume-section">
            <h3>项目经历</h3>
            <div class="section-content">
              <div v-for="(project, index) in currentResume.projectExperience" :key="index" class="timeline-item">
                <div class="time">{{ project.startTime }} - {{ project.endTime }}</div>
                <div class="content">
                  <div class="title">{{ project.name }}</div>
                  <div class="subtitle">{{ project.role }}</div>
                  <div class="description">{{ project.description }}</div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="resume-section">
            <h3>技能特长</h3>
            <div class="section-content">
              <div class="skills">
                <el-tag 
                  v-for="(skill, index) in currentResume.skills" 
                  :key="index"
                  class="skill-tag"
                >
                  {{ skill }}
                </el-tag>
              </div>
            </div>
          </div>
          
        </template>
        <div v-else class="empty-resume">
          简历数据加载中或不存在
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resumeDialogVisible = false">关闭</el-button>
          <el-button type="success" @click="handleInviteInterview(currentApplication)" :disabled="!currentApplication || currentApplication.status === 2 || currentApplication.status === 3">邀请面试</el-button>
          <el-button type="danger" @click="handleReject(currentApplication)" :disabled="!currentApplication || currentApplication.status === 3">不合适</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 邀请面试对话框 -->
    <el-dialog
      v-model="interviewDialogVisible"
      title="邀请面试"
      width="500px"
    >
      <el-form :model="interviewForm" label-width="100px" :rules="interviewRules" ref="interviewFormRef">
        <el-form-item label="面试时间" prop="interviewTime">
          <el-date-picker
            v-model="interviewForm.interviewTime"
            type="datetime"
            placeholder="选择面试时间"
            :disabled-date="disabledDate"
            :disabled-hours="disabledHours"
          />
        </el-form-item>
        <el-form-item label="面试地点" prop="location">
          <el-input v-model="interviewForm.location" placeholder="请输入面试地点"></el-input>
        </el-form-item>
        <el-form-item label="面试形式" prop="type">
          <el-radio-group v-model="interviewForm.type">
            <el-radio value="ONSITE">现场面试</el-radio>
            <el-radio value="PHONE">电话面试</el-radio>
            <el-radio value="ONLINE">在线面试</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="面试官" prop="interviewer">
          <el-input v-model="interviewForm.interviewer" placeholder="请输入面试官姓名"></el-input>
        </el-form-item>
        <el-form-item label="面试轮次" prop="round">
          <el-select v-model="interviewForm.round" placeholder="请选择">
            <el-option label="初试" :value="1" />
            <el-option label="复试" :value="2" />
            <el-option label="终试" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="视频链接" v-if="interviewForm.type === 'ONLINE'">
          <el-input v-model="interviewForm.link" placeholder="请输入视频会议链接"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input
            v-model="interviewForm.note"
            type="textarea"
            :rows="4"
            placeholder="请输入面试备注信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="interviewDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitInterview" :loading="submitting">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 拒绝原因对话框 -->
    <el-dialog
      v-model="rejectDialogVisible"
      title="拒绝原因"
      width="500px"
    >
      <el-form :model="rejectForm" label-width="100px" ref="rejectFormRef">
        <el-form-item label="拒绝原因" prop="reason">
          <el-select v-model="rejectForm.reason" placeholder="请选择拒绝原因">
            <el-option label="经验不符" value="经验不符" />
            <el-option label="技能不匹配" value="技能不匹配" />
            <el-option label="薪资期望过高" value="薪资期望过高" />
            <el-option label="简历信息不完整" value="简历信息不完整" />
            <el-option label="职位已关闭" value="职位已关闭" />
            <el-option label="其他原因" value="其他原因" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input
            v-model="rejectForm.note"
            type="textarea"
            rows="4"
            placeholder="请输入拒绝备注信息"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rejectDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReject" :loading="submitting">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { 
  getJobApplications, 
  updateApplicationStatus, 
  getRecruiterJobs,
  getResumeDetail,
  createInterview,
  rejectApplication 
} from '@/api/job'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()

// 从路由参数获取职位ID
const jobId = computed(() => route.query.jobId)

// 搜索表单
const searchForm = reactive({
  name: '',
  status: '',
  jobId: jobId.value || ''
})

// 加载状态
const loading = ref(false)
const resumeLoading = ref(false)
const submitting = ref(false)

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 职位选项
const jobOptions = ref([])

// 申请列表数据
const applicationList = ref([])

// 对话框显示控制
const resumeDialogVisible = ref(false)
const interviewDialogVisible = ref(false)
const rejectDialogVisible = ref(false)

// 当前查看的简历
const currentResume = ref(null)
const currentApplication = ref(null)

// 面试表单
const interviewFormRef = ref(null)
const interviewForm = reactive({
  interviewTime: '',
  location: '',
  type: 'ONSITE',
  interviewer: '',
  round: 1,
  link: '',
  note: ''
})

// 面试表单规则
const interviewRules = {
  interviewTime: [{ required: true, message: '请选择面试时间', trigger: 'change' }],
  location: [{ required: true, message: '请输入面试地点', trigger: 'blur' }],
  type: [{ required: true, message: '请选择面试形式', trigger: 'change' }],
  interviewer: [{ required: true, message: '请输入面试官', trigger: 'blur' }],
  round: [{ required: true, message: '请选择面试轮次', trigger: 'change' }]
}

// 拒绝表单
const rejectFormRef = ref(null)
const rejectForm = reactive({
  reason: '',
  note: ''
})

// 获取应用列表
const fetchApplicationList = async () => {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      candidateName: searchForm.name || undefined,
      status: searchForm.status || undefined
    }
    
    let res
    if (jobId.value) {
      res = await getJobApplications(jobId.value, params)
    } else if (searchForm.jobId) {
      res = await getJobApplications(searchForm.jobId, params)
    } else {
      res = { code: 200, data: { records: [], total: 0 } }
      ElMessage.warning('请选择要查看的职位')
    }
    
    if (res && res.code === 200) {
      // 处理返回的数据，添加candidateName和candidateInfo
      applicationList.value = (res.data.records || []).map(item => ({
        ...item,
        candidateName: item.resume.name || '未知用户',
        candidateInfo: `${item.resume?.education || ''} ${item.resume?.workYears || ''} ${item.resume?.location || ''}`
      }))
      total.value = res.data.total || 0
    } else {
      ElMessage.error(res?.message || '获取投递列表失败')
    }
  } catch (error) {
    console.error('获取投递列表失败', error)
    ElMessage.error('获取投递列表失败')
  } finally {
    loading.value = false
  }
}

// 获取职位选项列表
const fetchJobOptions = async () => {
  try {
    const res = await getRecruiterJobs({ page: 1, size: 100 })
    if (res.code === 200 && res.data.records) {
      jobOptions.value = res.data.records.map(job => ({
        label: job.title,
        value: job.id
      }))
    }
  } catch (error) {
    console.error('获取职位列表失败', error)
  }
}

// 获取状态类型
const getStatusType = (status) => {
  const map = {
    0: 'info',    // 待处理
    1: 'warning', // 已查看
    2: 'success', // 邀请面试
    3: 'danger'   // 不合适
  }
  return map[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const map = {
    0: '待处理',
    1: '已查看',
    2: '已邀面试',
    3: '不合适'
  }
  return map[status] || '未知状态'
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
  fetchApplicationList()
}

// 重置搜索
const resetSearch = () => {
  if (!jobId.value) {
    searchForm.jobId = ''
  }
  searchForm.name = ''
  searchForm.status = ''
  currentPage.value = 1
  fetchApplicationList()
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchApplicationList()
}

// 处理每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  fetchApplicationList()
}

// 查看简历
const viewResume = async (row) => {
  currentApplication.value = row
  resumeLoading.value = true
  resumeDialogVisible.value = true
  
  try {
    const res = await getResumeDetail(row.resumeId)
    if (res.code === 200) {
      // 解析JSON字符串字段
      const data = res.data
      try {
        // 解析求职期望
        if (data.jobExpectation) {
          const jobExp = JSON.parse(data.jobExpectation)
          data.expectedSalary = jobExp.salary
          data.expectedCity = jobExp.location
          data.expectedPosition = data.title || '未设置'
        }
        
        // 解析项目经历
        if (data.projectExperience) {
          data.projectExperience = JSON.parse(data.projectExperience)
          if (!Array.isArray(data.projectExperience)) {
            data.projectExperience = [data.projectExperience]
          }
        } else {
          data.projectExperience = []
        }
        
        // 解析工作经历
        if (data.workExperience) {
          data.workExperience = JSON.parse(data.workExperience)
          if (!Array.isArray(data.workExperience)) {
            data.workExperience = [data.workExperience]
          }
        } else {
          data.workExperience = []
        }

        // 处理教育经历
        if (data.school) {
          data.education = [{
            startTime: data.schoolStartDate || '未设置',
            endTime: data.schoolEndDate || '未设置',
            school: data.school,
            major: data.major || '未设置',
            degree: data.education || '未设置'
          }]
        } else {
          data.education = []
        }
        
        // 处理技能标签
        data.skills = data.skills ? data.skills.split(',').map(s => s.trim()) : []
        
        // 处理null值
        data.age = data.age || '未设置'
        data.education = data.education || '未设置'
        data.experience = data.workYears || '未设置'
        data.selfEvaluation = data.selfEvaluation || '暂无'
      } catch (error) {
        console.error('解析简历数据失败:', error)
      }
      
      currentResume.value = data
      
      // 如果是待处理状态，更新为已查看
      if (row.status === 0) {
        const updateRes = await updateApplicationStatus(row.id, 1)
        if (updateRes.code === 200) {
          row.status = 1
        }
      }
    } else {
      ElMessage.error(res.message || '获取简历详情失败')
    }
  } catch (error) {
    console.error('获取简历详情失败:', error)
    ElMessage.error('获取简历详情失败')
  } finally {
    resumeLoading.value = false
  }
}

// 邀请面试
const handleInviteInterview = (row) => {
  if (!row) return
  
  console.log('开始面试邀请，申请记录:', row);
  
  currentApplication.value = row
  
  interviewForm.interviewTime = ''
  interviewForm.location = ''
  interviewForm.type = 'ONSITE'
  interviewForm.interviewer = ''
  interviewForm.round = 1
  interviewForm.link = ''
  interviewForm.note = ''
  interviewDialogVisible.value = true
}

// 提交面试邀请
const submitInterview = async () => {
  if (!interviewFormRef.value) return
  
  await interviewFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    submitting.value = true
    try {
      if (!currentApplication.value || !currentApplication.value.id) {
        console.error('无效的申请记录');
        ElMessage.error('申请信息不完整，无法发送面试邀请');
        return;
      }
      
      // 构建面试数据
      const interviewData = {
        applicationId: currentApplication.value.id,
        interviewTime: dayjs(interviewForm.interviewTime).format('YYYY-MM-DD HH:mm:ss'),
        location: interviewForm.location,
        type: interviewForm.type,
        interviewer: interviewForm.interviewer,
        round: interviewForm.round,
        link: interviewForm.type === 'ONLINE' ? interviewForm.link : ''
      }
      
      console.log('发送面试数据:', interviewData);
      
      // 创建面试记录
      const res = await createInterview(interviewData)
      
      if (res.code === 200) {
        // 更新申请状态为"已邀面试"
        const updateRes = await updateApplicationStatus(
          currentApplication.value.id, 
          2, 
          `面试时间: ${dayjs(interviewForm.interviewTime).format('YYYY-MM-DD HH:mm')}`
        )
        
        if (updateRes.code === 200) {
          ElMessage.success('面试邀请已发送')
          interviewDialogVisible.value = false
          
          // 更新列表中的状态
          const index = applicationList.value.findIndex(item => item.id === currentApplication.value.id)
          if (index !== -1) {
            applicationList.value[index].status = 2
          }
          
          // 如果简历对话框打开，同时关闭
          if (resumeDialogVisible.value) {
            resumeDialogVisible.value = false
          }
        }
      } else {
        ElMessage.error(res.message || '发送面试邀请失败')
      }
    } catch (error) {
      console.error('发送面试邀请失败:', error)
      ElMessage.error('发送面试邀请失败')
    } finally {
      submitting.value = false
    }
  })
}

// 拒绝申请
const handleReject = (row) => {
  if (!row) return
  
  currentApplication.value = row
  rejectForm.reason = ''
  rejectForm.note = ''
  rejectDialogVisible.value = true
}

// 提交拒绝
const submitReject = async () => {
  submitting.value = true
  try {
    // 构建拒绝数据
    const rejectData = {
      applicationId: currentApplication.value.id,
      reason: rejectForm.reason,
      note: rejectForm.note
    }
    
    // 调用拒绝接口
    const res = await rejectApplication(rejectData)
    
    if (res.code === 200) {
      // 更新应聘状态为"不合适"
      const updateRes = await updateApplicationStatus(
        currentApplication.value.id, 
        3,  // 状态3表示"不合适"
        `拒绝原因: ${rejectForm.reason}`
      )
      
      if (updateRes.code === 200) {
        ElMessage.success('已设置为不合适')
        rejectDialogVisible.value = false
        
        // 更新列表中的状态
        const index = applicationList.value.findIndex(item => item.id === currentApplication.value.id)
        if (index !== -1) {
          applicationList.value[index].status = 3  // 正确的"不合适"状态
        }
        
        // 如果简历对话框打开，同时关闭
        if (resumeDialogVisible.value) {
          resumeDialogVisible.value = false
        }
      } else {
        ElMessage.error(updateRes.message || '设置不合适状态失败')
      }
    } else {
      ElMessage.error(res.message || '操作失败')
    }
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败: ' + (error.message || '未知错误'))
  } finally {
    submitting.value = false
  }
}

// 返回职位列表
const goBack = () => {
  router.push('/recruiter/jobs')
}

// 禁用日期（今天之前的日期不可选）
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7 // 禁用今天之前的日期
}

// 禁用小时（工作时间外的时间不可选）
const disabledHours = () => {
  const hours = []
  for (let i = 0; i < 24; i++) {
    if (i < 9 || i > 18) hours.push(i)
  }
  return hours
}

// 组件挂载时
onMounted(async () => {
  try {
    // 如果有职位ID，直接获取该职位的申请列表
    if (jobId.value) {
      await fetchApplicationList()
    } else {
      // 否则获取职位选项列表
      await fetchJobOptions()
      if (jobOptions.value.length) {
        searchForm.jobId = jobOptions.value[0].value
        await fetchApplicationList()
      }
    }
  } catch (error) {
    console.error('初始化数据失败:', error)
    ElMessage.error('初始化数据失败')
  }
})
</script>

<style lang="scss" scoped>
.applications-page {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }
  }

  .search-card {
    margin-bottom: 20px;
  }

  .application-list {
    flex: 1;
    display: flex;
    flex-direction: column;

    .el-card__body {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .el-table {
      flex: 1;
    }

    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }

  .candidate-info {
    .name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
      color: #303133;
    }

    .info {
      color: #909399;
      font-size: 13px;
    }
  }
}

.resume-detail {
  .resume-header {
    margin-bottom: 20px;

    h2 {
      margin-top: 0;
      margin-bottom: 10px;
      color: #303133;
    }

    .basic-info {
      margin-bottom: 10px;
      color: #606266;

      span {
        margin-right: 15px;
      }
    }

    .contact-info {
      color: #606266;
      
      div {
        margin-bottom: 5px;
      }
      
      .label {
        color: #909399;
        display: inline-block;
        width: 50px;
      }
    }
  }

  .resume-section {
    margin-bottom: 20px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 15px;
      position: relative;
      padding-left: 12px;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 4px;
        background-color: #409EFF;
        border-radius: 2px;
      }
    }

    .section-content {
      padding-left: 12px;
    }

    .info-item {
      margin-bottom: 10px;

      .label {
        color: #909399;
        display: inline-block;
        width: 80px;
      }
    }

    .timeline-item {
      display: flex;
      margin-bottom: 15px;

      .time {
        width: 150px;
        color: #909399;
        flex-shrink: 0;
      }

      .content {
        flex-grow: 1;

        .title {
          font-weight: 600;
          color: #303133;
          margin-bottom: 5px;
        }

        .subtitle {
          color: #606266;
          margin-bottom: 5px;
        }

        .description {
          color: #606266;
          white-space: pre-line;
        }
      }
    }

    .skills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      .skill-tag {
        margin-bottom: 5px;
      }
    }
  }
}

.empty-resume {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}
</style> 